<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:form>
        <p:commandLink styleClass="btn btn-default btn-primary" update=":panelContent"
                       action="#{inputProductController.calculatorTotal()}">
            <i class="glyphicon glyphicon-search"/>
            REGGRESAR AL LISTADO
            <f:setPropertyActionListener
                target="#{navigationController.navigationContent}"
                value="./pages/operation/register_product/forms/product_new_register.xhtml" />
        </p:commandLink>
    </h:form>
    <hr/>
    <div align="center"><h1>Lista de Productos</h1></div>
    <hr/>
    <!-- CREACIÓN DEL LLENADO PARA PRODUCTOS NUEVOS. SE TIENE QUE VER EL PROVEEDOR -->
    <h:form>
        <div class="row">

            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon">CÓDIGO: </span>
                    <input type="text" class="form-control" placeholder="Ejemplo: CD3304" 
                           jsf:value="#{inputProductController.searchForCode}"
                           jsf:onblur="value=value.toUpperCase()"/>
                </div>
            </div>
            <div class="col-lg-4">
                <!-- BUSQUEDA PARA TIENDA -->
                <div class="input-group">
                    <span class="input-group-addon">NOMBRE: </span>
                    <input type="text" class="form-control" placeholder="Ejemplo: Producto A" 
                           jsf:value="#{inputProductController.searchForName}"
                           jsf:onblur="value=value.toUpperCase()"/>
                </div>
            </div>

            <div class="col-lg-4" align="right">
                <p:commandLink styleClass="btn btn-default btn-primary" 
                               update=":formTabbb:tablex"
                               action="#{inputProductController.searchProduct()}">
                    <i class="glyphicon glyphicon-search" />
                    BUCAR
                </p:commandLink>
            </div>
        </div>
    </h:form>
    <hr/>
    <h:form id="formTabbb">

        <p:dataTable value="#{inputProductController.lazyModelProduct}" var="item" emptyMessage="No existe"
                     paginator="true" rows="10" lazy="true" id="tablex"
                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">
            <p:column width="5">
                <p:menuButton styleClass="menubutton-for-table">  
                    <p:menuitem value="Añadir al Carrito" icon="ui-icon-cart"
                                oncomplete="modalAddToCard.show();" update=":Reording">
                        <f:setPropertyActionListener
                            target="#{inputProductController.product}"
                            value="#{item}" />
                    </p:menuitem>
                </p:menuButton>
            </p:column>    
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Código"/>
                </f:facet>
                <h:outputText value="#{item.productId}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Nombre"/>
                </f:facet>
                <h:outputText value="#{item.name}"/>
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Tipo de unidad"/>
                </f:facet>
                <h:outputText value="#{item.unitTypeId.name}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Categoría"/>
                </f:facet>
                <h:outputText value="#{item.categoryId.name}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Marca"/>
                </f:facet>
                <h:outputText value="#{item.markId.name}"/>
            </p:column>
        </p:dataTable>
    </h:form>


    <p:dialog modal="true" appendTo="@(body)" header="Confirmar"
              widgetVar="modalAddToCard" id="modalAddToCardId">
        <h:form id="Reording">
            <div class="row">
                <div class="input-group">
                    <span class="input-group-addon">CÓDIGO: #{inputProductController.product.productId}</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">PRODUCTO: #{inputProductController.product.name}</span>
                </div>
            </div>
            <hr/>
            <div class="row">
                <span class="input-group-addon">CANTIDAD: </span>
                <p:spinner value="#{inputProductController.amountProductForSale}" 
                           styleClass="form-control" min="1" stepFactor="1"/>
            </div>
            <div class="row" jsf:rendered="#{!inputProductController.existProductInCart}">
                <span class="input-group-addon">COSTO: </span>
                <p:spinner value="#{inputProductController.priceProductForSale}" 
                           styleClass="form-control" stepFactor="0.10"/>
            </div>
 
            
            <br/>
            <p:commandLink styleClass="btn btn-default btn-primary"
                           action="#{inputProductController.saveInToCart()}">
                <i class="glyphicon glyphicon-search"/>
                AÑADIR
            </p:commandLink>
        </h:form>
    </p:dialog>


</ui:composition>
